import React, { useCallback } from 'react';
import { Text, View } from '@ray-js/ray';
import Styles from './tabs.module.less';
import clsx from 'clsx';
interface TabsProps {
  options: { text: string; key: string }[];
  current: number;
  onChange: (key: number) => void;
}

export function Tabs(props: TabsProps) {
  const onChange = useCallback(e => {
    const index = e.origin.currentTarget.dataset.index;
    props.onChange(index);
  }, []);

  return (
    <View className={Styles.wrapper}>
      {props.options.map((item, index) => (
        <View
          key={index}
          data-index={index}
          className={clsx(Styles.item, index === props.current && Styles.active)}
          onClick={onChange}
        >
          <Text>{item.text}</Text>
        </View>
      ))}
    </View>
  );
}

export default Tabs;
